<template>
    <el-container class="oil-price-container">
        <el-header>
            <h1>今日各地区油价</h1>
        </el-header>
        <el-main>
            <el-table :data="oilPrices" style="width: 100%; ">
                <el-table-column prop="area" label="地区" width="120"></el-table-column>
                <el-table-column prop="p98" label="98号汽油" width="120"></el-table-column>
                <el-table-column prop="p95" label="95号汽油" width="120"></el-table-column>
                <el-table-column prop="p92" label="92号汽油" width="120"></el-table-column>
                <el-table-column prop="p0" label="0号柴油" width="120"></el-table-column>
                <el-table-column prop="p10" label="-10号柴油" width="120"></el-table-column>
                <el-table-column prop="p20" label="-20号柴油" width="120"></el-table-column>
                <el-table-column prop="p35" label="-35号柴油" width="120"></el-table-column>
            </el-table>
        </el-main>
    </el-container>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { getTodayOilPrice } from '@/api/oilPrice/oilPrice';
import type { OilPrice } from '@/api/oilPrice/oilPrice';
import { showErrorMsg } from '@/api/common';
import type { ApiResponse } from '@/api/common';
const oilPrices = ref<OilPrice[]>([]);

onMounted(() => {
    getTodayOilPrice().then((res: ApiResponse<OilPrice[]>) => {
        if (res.status != 200) {
            showErrorMsg(res.msg);
        } else {
            oilPrices.value = res.data;
        }
    });
})
</script>

<style scoped>
/* 整体布局 */
.oil-price-container {
    /* 让页面高度充满视口 */
    /* height: 100vh; */
    display: flex;
    flex-direction: column;
    /* 垂直居中 */
    justify-content: center;
    /* 水平居中 */
    align-items: center;
    font-size: large;
}

/* 表格容器 */
.table-wrapper {
    width: 100%;
    /* 表格容器的宽度占据父容器 */
    display: flex;
    justify-content: center;
    /* 表格水平居中 */
    align-items: center;
    /* 垂直居中 */
}
</style>